<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div>
  选择颜色：<select id="colorSelect">
    <option value="">请选择</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
  </select>
</div>
<div>
  选择内存: <select id="memorySelect">
    <option value="">请选择</option>
    <option value="32G">32G</option>
    <option value="16G">16G</option>
  </select>
</div>
<div>
  输入购买数量：<input id="numberInput" type="text" />
</div>
<div>
  你选择了颜色：<span id="colorInfo"></span>
</div>
<div>
  您选择了内存: <span id="memoryInfo"></span>
</div>
<div>
  您输入了数量：<span id="numberInfo"></span>
</div>
<button id="nextBtn" disabled="true">请选择手机和购买数量</button>
<script>
let colorSelect = document.getElementById('colorSelect');
let memorySelect = document.getElementById('memorySelect');
let numberInput = document.getElementById('numberInput');
let colorInfo = document.getElementById('colorInfo');
let memoryInfo = document.getElementById('memoryInfo');
let numberInfo = document.getElementById('numberInfo');
let nextBtn = document.getElementById('nextBtn');
// 手机库存
let goods = {
  'red|32G': 3,
  'red|64G': 0,
  'blue|32G': 1,
  'blue|64G': 6,
}
class Mediator {
  constructor(eles) {
    Object.assign(this, eles)
    console.log(this);
  }
  changed(obj) {
    let color = this.colorSelect.value,
      number = this.numberInput.value,
      memory = this.memorySelect.value,
      stock = goods[color + '|' + memory];
    if(obj === this.colorSelect) {
      this.colorInfo.innerHTML = color;
    } else if(obj === this.numberInput) {
      this.numberInfo.innerHTML = number;
    } else if(obj === this.memorySelect) {
      this.memoryInfo.innerHTML = memory;
    }
    if(!color) {
      this.nextBtn.disabled = true;
      this.nextBtn.innerHTML = '请选择手机颜色';
      return;
    }
    if(!memory) {
      this.nextBtn.disabled = true;
      this.nextBtn.innerHTML = '请选择内存大小';
      return;
    }
    if(number <= 0) {
      this.nextBtn.disabled = true;
      this.nextBtn.innerHTML = '请输入正确的购买数量';
      return;
    }
    this.nextBtn.disabled = false;
    this.nextBtn.innerHTML = '放入购物车';
  }
}
let eles = { 
  colorSelect, memorySelect, numberInput,
  colorInfo, memoryInfo, numberInfo,
  nextBtn
}
let mediator = new Mediator(eles)
colorSelect.onchange = function() {
  mediator.changed(this)
}
memorySelect.onchange = function() {
  mediator.changed(this)
}
numberInput.oninput = function() {
  mediator.changed(this)
}

</script>
</body>
</html>
